<!-- $Id: uiconfig.html,v 1.6 2010-01-02 09:45:14 gaudenz Exp $ Copyright (c) 2006-2010, JGraph Ltd UIConfig example for mxGraph. This example demonstrates using a config file to configure the toolbar and popup menu in mxEditor.-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>topo page</title><!-- Sets the basepath for the library if not in same directory -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <!-- Loading Stylesheets -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">


    <style>
        html,
        body {
            font: 14px, arial, "微软雅黑";
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            background-repeat: no-repeat
        }

        #mynetwork {
            width: 100%;
            height: 100%;
        }

        .table {
            background: #fff;
            border: 1px solid #ccc;
        }

        .table td {
            border-left: 1px solid #ccc;
        }

        body,
        .site-holder {
            background: #fff;
            overflow: auto;
        }

    </style>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
  <![endif]-->
</head>

<script type="text/javascript">
    mxBasePath = '../src';

</script>

<script type="text/javascript" src="../src/js/mxClient.js"></script>
<!-- Page passes the container for the graph to the grogram -->

<body onload=" draw(document.getElementById('graphContainer'));" style="width: 100%;height:100%;background-color: rgba(255,255,255,0)">
<div id="graphContainer" style="width: 100%;height:100%;cursor:default;position:absolute; right:2; top:2">


</body>

<!-- Example code -->
<script type="text/javascript">
    function GetRequest() {
        var url = location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }

    // Program starts here. Creates a sample graph in the// DOM node with the specified ID. This function is invoked// from the onLoad event handler of the document (see below).
    function draw(container) {
        // Checks if the browser is supported
        if (!mxClient.isBrowserSupported()) {
            // Displays an error message if the browser is not supported.
            mxUtils.error('Browser is not supported!', 200, false);
        } else {
            var type = GetRequest().type;
            var model = new mxGraphModel();
            var graph = new mxGraph(container, model);
            graph.setHtmlLabels(true); //文本换行操作
            graph.setEnabled(false); //graph不可拖拽

            // Overrides method to provide a cell label in the display
            graph.convertValueToString = function(cell) {
                if (mxUtils.isNode(cell.value)) {
                    if (cell.value.nodeName.toLowerCase() == 'object') {
                        var labelName = cell.getAttribute('label', '');
                        return labelName;
                    }
                } else {
                    return cell.value;
                }
            };

            var style = graph.getStylesheet().getDefaultVertexStyle();
            //                style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
            //                style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_BOTTOM;
            //            style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_;
            //            style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
            //            style[mxConstants.STYLE_IMAGE] = 'images/start_event_empty.png';
            //            style[mxConstants.STYLE_IMAGE_WIDTH] = '48';
            //            style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';
            style[mxConstants.STYLE_FONTCOLOR] = '#000000';
            style[mxConstants.STYLE_FILLCOLOR] = '#FFFFFF';
            //            style[mxConstants.STYLE_VERTICAL_LABEL_POSITION] = mxConstants.ALIGN_CENTER;
            graph.getStylesheet().putCellStyle('start-s', style);

            graph.getModel().beginUpdate();
            var fileName = 'file/chinaTopo.xml';
            var req = mxUtils.load(fileName);
            var root = req.getDocumentElement();
            var dec = new mxCodec(root.ownerDocument);
            dec.decode(root, graph.getModel());
            graph.getModel().endUpdate();
            var track = new mxCellTracker(graph);
            track.mouseMove = function(sender, me) {
                var cell = this.getCell(me);
                if (cell) {
                    //设置鼠标为样式为手状
                    me.getState().setCursor('pointer');
                }
            };


            graph.fit();
            graph.addListener(mxEvent.DOUBLE_CLICK, function(sender, evt) {
                var cell = evt.getProperty('cell');
                //                    var cell = graph.getSelectionCell();
                selectionChanged(graph, cell);
            });
        }
    }


    function selectionChanged(graph, cell) {
        var industrial;
        if (cell != null) {
            if (mxUtils.isNode(cell.value) && cell.value.nodeName.toLowerCase() == 'object') {
                industrial = cell.getAttribute('industrial', '');
            } else {
                industrial = cell.industrial;
            }
            if (industrial != null && industrial != '') {
                var ifr = window.parent; //获取父窗体
                var targetOrigin = 'http://dataexchange.picp.net';
                //ifr.postMessage(industrial, targetOrigin);
							//	window.open("http://dataexchange.picp.net/sd/#/investment/chain/enterprises?chainNames="+industrial)
                window.open("/sd/#/investment/chain/enterprises?chainNames="+industrial)
                return;
            }
        }
    }

    var industryId = GetRequest().type;
    // console.log(GetRequest().type);

</script>

</html>
